<template>
  <div class="sku">
    <scroll-view scroll-y="true" style="height: 750rpx">
      <div class="sku-content">
        <div class="sku-content-view">
          <image
            mode="aspectFill"
            :src="productSpecs.pic"
          ></image>
          <div class="right">
            <div class="money" v-if="productSpecs.otherPrice1">￥<span>{{productSpecs.otherPrice1}}</span></div>
            <div class="bottom">
              <div class="left">
                <div class="vip">
                  <img v-if="levelName" :src="icon.vip" alt="">
                  <span>{{levelName || '普通用户'}}</span>
                </div>
                <div class="money">￥{{productSpecs.salesPrice}}</div>
              </div>
              <div class="mark">库存： {{ productSpecs.stockNum }}</div>
            </div>
            <div class="mark">
              规格型号 {{ productSpecs.productName }} {{ productSpecs.propertiesValue }}
            </div>
          </div>
        </div>
        <div class="guige">
          <span class="h3">规格</span>
          <div class="lis">
            <div
              class="li"
              v-for="(tab, index) in SpecsList"
              :key="index"
              :class="skuAct === index ? 'sec-act-tab' : ''"
              @click="changeSku(tab,index)"
            >
              <span :class="tab.stockNum <= 0 ? 'disabled':''">{{ tab.propertiesValue }}</span>
            </div>
          </div>
        </div>
        <div class="shuliang">
          <span>数量</span>
          <u-number-box 
          :min="0" 
          :asyncChange="true"
         >
            <div slot="minus" class="minus" @click="minus">
              <u-icon name="minus" color="#333" size="16"></u-icon>
            </div>
            <input type="number"
              slot="input"
              v-model="skuObj.productAmount"
              style="width: 150rpx; text-align: center"
              class="input"
              @blur="overlimit"
              />
            <div slot="plus" class="plus" @click="plus">
              <u-icon name="plus" color="#fff" size="16"></u-icon>
            </div>
          </u-number-box>
          <!-- <div class="slider">
            <u-slider v-model="skuObj.productAmount" :min="0" :max="productSpecs.stockNum" showValue></u-slider>
          </div> -->
        </div>
      </div>
    </scroll-view>
    <div class="button">
      <u-button
        v-if="num == 1 || num == 0"
        :customStyle="customStyleaa2"
        :disabled="productSpecs.stockNum <= 0"
        :hair-line="false"
        @click="goOrder(1)"
        >加入购物车</u-button
      >
      <u-button
        v-if="num == 2 || num == 0"
        :customStyle="customStyle2"
        :disabled="productSpecs.stockNum <= 0"
        :hair-line="false"
        @click="goOrder(2)"
        >立即购买</u-button
      >
      <u-button
        v-if="num == 3"
        :customStyle="customStyle2"
        :disabled="productSpecs.stockNum <= 0"
        :hair-line="false"
        @click="goOrder(3)"
        >确 定</u-button
      >
    </div>
  </div>
</template>

<script>
	import auth from '../api/auth.js'
export default {
  props: {
    goodsObj:{
      type:Object,
      default:null
    },
    productSpecsList: {
      type: Array,
      default: [],
    },
    num: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      icon: {
        vip: require('../static/vip-icon.png'),
      },
      skuAct: 0,
      levelName: '',
      customStyle2: {
        background: '#FC6420',
        width: '100%',
        color: '#fff',
        border: 0,
      },
      customStyleaa2: {
        background: '#F5F7F9',
        width: '100%',
        color: '#333',
        marginRight: '16rpx',
        border: 0,
      },
      productSpecs:{},
      skuObj:{
        productAmount:0,
        productId: 0,
        productSkuId: 0
      },
      SpecsList: []
    }
  },
  created() {
    console.log(this.productSpecsList)
    this.memberGetUserInfo()
    if(this.goodsObj) {
      this.productGetOne(this.goodsObj.spuCode)
      this.$set(this.skuObj,'productAmount',this.goodsObj.productAmount)
    } else {
      this.SpecsList = [...this.productSpecsList]
      this.productSpecs = this.SpecsList[0]
      this.skuAct = 0
    }
  },
  watch: {
    value(v) {
      this.$emit('search', v)
    },
  },
  methods: {
    /**
     * 获取详情数据
     */
    async productGetOne(spuCode) {
      let res = await auth.productGetOne({spuCode})
      this.SpecsList = [...res.productSpecsList]
      console.log(this.SpecsList)
      this.productSpecs = this.SpecsList.find(_=>_.skuCode === this.goodsObj.skuCode)
      this.skuAct = this.SpecsList.findIndex(_=>_.skuCode === this.goodsObj.skuCode)
    },  // 获取我的页面信息
    async memberGetUserInfo() {
      let res = await auth.memberGetUserInfo();
      this.levelName = res.levelName 
    },
    minus() {
      if(this.skuObj.productAmount == 0) {
        return
      } else {
        this.skuObj.productAmount--
      }
    },
    plus() {
      if(this.skuObj.productAmount == this.productSpecs.stockNum) {
        return
      } else {
        this.skuObj.productAmount++
      }
    },
    overlimit(){
      if(this.skuObj.productAmount > this.productSpecs.stockNum) {
        this.skuObj.productAmount = this.productSpecs.stockNum
      }
    },
    changeSku(tab,index) {
      this.productSpecs = tab
      this.skuAct = index
    },
    goOrder(type) {
      // num=1加入购物车num=2立即购买num=3修改购物车
      if(!this.skuObj.productAmount) {
        uni.$u.toast('请选择购买数量')
        return
      }
      let totalMoney = Math.floor(this.productSpecs.salesPrice * this.skuObj.productAmount * 100) / 100
      this.skuObj.productSkuId = this.productSpecs.id
        this.$emit('goOrder', { skuObj: this.skuObj, type ,totalMoney})
    },
  },
}
</script>

<style lang="scss" scoped>
.sku {
  .sku-content {
    padding-bottom: 50rpx;
    .sku-content-view {
      padding: 32rpx;
      display: flex;
      image {
        width: 200rpx;
        height: 200rpx;
        background: #d8d8d8;
        border-radius: 8rpx;
        margin-right: 24rpx;
      }
      .right {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .money {
          font-family: Bebas;
          font-size: 26rpx;
          color: #fc3d1c;
          line-height: 56rpx;
          text-align: left;
          font-style: normal;
          span {
            font-size: 56rpx;
            font-weight: 500;
          }
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          .left {
            display: flex;
            text-align: center;
            .vip {
              width: 92rpx;
              height: 36rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20rpx;
              background: linear-gradient(153deg, #f6efe5 0%, #fdebdb 100%);
              img {
                width: 24rpx;
                height: 24rpx;
                margin-right: 6rpx;
              }
            }
            .money {
              width: 112rpx;
              height: 36rpx;
              line-height: 36rpx;
              font-size: 20rpx;
              color: #7F4D27;
              background: #FFF6EF;
              text-align: center;
              border-radius: 0rpx 8rpx 8rpx 0rpx;
            }
          }
        }
        .mark {
          color: #8c9398;
          font-size: 26rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /*!autoprefixer: off */
          -webkit-box-orient: vertical;
        }
      }
    }
    .guige {
      margin: 32rpx;
      margin-top: 0;
      overflow: hidden;
      .h3 {
        font-size: 26rpx;
        line-height: 56rpx;
      }
      .lis {
        display: block;
        .li {
          float: left;
          line-height: 36rpx;
          font-size: 24rpx;
          padding: 20rpx;
          color: #626262;
          background: #f5f7f9;
          border-radius: 8rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
          .disabled {
            color: #ccc;
          }
        }
        .sec-act-tab {
          color: #FC6420;
          background: #FFF1F1;
        }
      }
    }
    .shuliang {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 120rpx;
      line-height: 120rpx;
      padding: 0 32rpx;
      border-top: 1px solid #e8e9ea;
      border-bottom: 1px solid #e8e9ea;
      // span {
      //   display: inline-block;
      // }
      // .slider {
      //   flex: 1;
      // }
      input {
        display: inline-block;
      }
      .minus {
        width: 56rpx;
        height: 56rpx;
        text-align: center;
        line-height: 56rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f7f8fa;
        border-radius: 50%;
      }
      .plus {
        width: 56rpx;
        height: 56rpx;
        text-align: center;
        line-height: 56rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FC6420;
        border-radius: 50%;
      }
    }
  }
  .button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 32rpx;
    box-sizing: border-box;
    button {
      width: 100%;
    }
  }
}
</style>
